<template>
    <div class="language-preferences">
        <AppFormItem :label="i18n.t('preferences:language.label')">
            <AppSelect v-model="localValue" :options="options" />

            <AppButton v-if="isChanged" @click="onReload">
                {{ i18n.t('restartApp') }}
            </AppButton>
        </AppFormItem>
    </div>
</template>

<script setup lang="ts">
import { useAppStore } from '@/store/app'
import { computed, ref } from 'vue'
import { i18n, ipc } from '@/electron'
import { track } from '@/services/analytics'
import { language } from '../../../main/services/i18n/language'

const appStore = useAppStore()

const storedValue = ref(appStore.language)
const isChanged = ref(false)

const localValue = computed({
    get: () => appStore.language,
    set: (v) => {
        if (v !== storedValue.value) {
            isChanged.value = true
        } else {
            isChanged.value = false
        }
        appStore.setLang(v)
        track('app/set-language', v)
    }
})

const options: { label: string; value: string }[] = []

Object.entries(language).forEach(([k, v]) => {
    options.push({
        label: v,
        value: k
    })
})

const onReload = () => {
    ipc.invoke('main:restart', {})
}
</script>

<style lang="scss" scoped></style>
